<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar title="个人中心"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">
			<view class="header-cont">
				<image class="header-logo" :src="userInfo.avatar"></image>
				<view class="header-info">
					<view class="header-username">{{userInfo.username}}</view>
					<view class="header-rolename">{{userInfo.roleId}}</view>
				</view>
			</view>
			<view class="menu-cont">
				<view class="menu-box">
					<view class="menu-item">
						<view class="menu-item-title">手机号</view>
						<view class="menu-item-detail">{{userInfo.mobile}}</view>
					</view>
					<view class="menu-item">
						<view class="menu-item-title">所属部门</view>
						<view class="menu-item-detail">{{userInfo.deptName}}</view>
					</view>
					<view class="menu-item">
						<view class="menu-item-title">角色信息</view>
						<view class="menu-item-detail">{{userInfo.roleName}}</view>
					</view>
					<view class="menu-item">
						<view class="menu-item-title">登录时间</view>
						<view class="menu-item-detail">{{userInfo.logintime}}</view>
					</view>
					<view class="menu-item">
						<view class="menu-item-title">登录IP</view>
						<view class="menu-item-detail">{{userInfo.loginip}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useThemeStore from '@/store/theme';
	import useUserStore from '@/store/user';
	const themeStore = useThemeStore();
	const userStore = useUserStore();
	const { pageHeight } = useNavbar();
	const { themeList } = storeToRefs(themeStore);
	const { userInfo } = storeToRefs(userStore);
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			background: linear-gradient(135deg, rgba(229, 233, 246, 1) 0%, rgba(229, 240, 248, 1) 26.08%, rgba(230, 236, 249, 1) 72.48%, rgba(243, 249, 250, 1) 100%);
			overflow: hidden;
			overflow-y: auto;
		}

		.header-cont {
			padding: 30px 20px;
			display: flex;
			box-sizing: border-box;

			.header-logo {
				width: 60px;
				height: 60px;
			}

			.header-info {
				margin-left: 10px;
			}

			.header-username {
				color: #333;
				font-size: 15px;
				font-weight: 600;
			}

			.header-rolename {
				margin-top: 10px;
				color: #333;
				font-size: 15px;
				font-weight: 600;
			}
		}

		.menu-cont {
			padding: 0 10px;
		}

		.menu-box {
			padding: 0 20px;
			border-radius: 10px;
			background-color: #fff;
		}

		.menu-item {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #DFDFDF;
			background-color: #fff;

			&:last-child {
				border: none;
			}
		}

		.menu-item-title {
			color: #333;
			font-size: 14px;
		}

		.menu-item-detail {
			padding-left: 10px;
			color: #666;
			font-size: 14px;
		}
	}

	.popup-cont {
		background: #fff;

		.popup-title,
		.popup-header {
			height: 100rpx;
			line-height: 100rpx;
			color: #333;
			font-size: 28rpx;
			text-align: center;
			border-top: 2rpx solid #eee;
		}

		.popup-header {
			font-size: 32rpx;
			font-weight: 600;
		}
	}
</style>